<template>
  <chart :options="opts" :width="width" :height="height"></chart>
</template>

<script>
export default {
  name: 'Scatter',

  props: ['width', 'height', 'options'],

  computed: {
    opts () {
      const textStyle = {
        color: '#99A1A8'
      }

      let defaultOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: '3%',
          right: '3%',
          bottom: '10%',
          top: '10%'
        },
        legend: {
          right: 10,
          textStyle
        },
        xAxis: [{
          type: 'category',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle
          }
        }],
        series: []
      }

      return _.merge({}, defaultOptions, this.options)
    }
  }
}
</script>

<style lang="css">
</style>
